<template>
  <div class="statistic-item">
    <!-- 数字显示区域 -->
    <div class="number-wrapper d-flex items-center">
      <span
          v-for="(digit, index) in formattedNumber"
          :key="index"
          class="digit-box"
      >
        {{ digit }}
      </span>
      <span class="unit">{{ unit }}</span>
    </div>
    <!-- 标题显示 -->
    <div class="label">{{ label }}</div>
  </div>
</template>

<script>
export default {
  props: {
    // 数据标签
    label: {
      type: String,
      required: true
    },
    // 数据值
    value: {
      type: Number,
      required: true
    },
    // 单位
    unit: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 格式化数字为至少三位，不足补零
    formattedNumber() {
      return this.value.toString().padStart(3, '0');
    }
  }
};
</script>

<style scoped>
.statistic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 平均分配父容器宽度 */
  min-width: 80px;
}

.number-wrapper {
  margin-bottom: 6px;
  gap: 3px;
}

.digit-box {
  width: 25px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3de7c9;
  border-radius: 2px;
  background-color: rgba(61, 231, 201, 0.1);
  font-weight: 600;
  font-size: 17px;
  color: #3de7c9;
}

.unit {
  font-size: 14px;
  color: #3de7c9;
  margin-left: 4px;
  align-self: flex-end;
  margin-bottom: 2px;
}

.label {
  font-size: 13px;
}
</style>
